<template>
  <div class="article-info">
    <div class="top">
      <div class="info">
        <h1>{{list.title}}</h1>
        <el-tag type="info" v-for="(item1,i) in list.tags" :key="i">{{item1.name}}</el-tag>
        <div class="time">
          <span>createAt:{{list.createTime | date}}</span>
          <span>updateAt:{{list.updateTime | date}}</span>
        </div>
      </div>
      <el-image :src="list.titlePicture" fit="cover" v-if="list.titlePicture"></el-image>
    </div>

    <div class="article-body">
      <div v-html="code" class="body" ref="article"></div>
    </div>
  </div>
</template> 

<script>
import marked from "marked";
import "github-markdown-css";
import hljs from "highlight.js";
import javascript from "highlight.js/lib/languages/javascript";
import "highlight.js/styles/monokai-sublime.css";

import dayjs from "dayjs";
export default {
  name:'ArticleInfo',
  data() {
    return {
      list: {},
      code: "",
    };
  },
  filters: {
    date(val) {
      return dayjs(val).format("YYYY/MM/DD");
    },
  },
  methods: {
    async getArticleInfo() {
      const res = await this.$http.get(`articles/${this.$route.params.id}`);
      this.list = res.data;
      this.code = marked(this.list.body);
    },
  },
  created() {
    this.getArticleInfo();
  },
  mounted() {
    marked.setOptions({
      renderer: new marked.Renderer(),
      highlight: function (code) {
        return hljs.highlightAuto(code).value;
      },
      pedantic: false,
      gfm: true,
      tables: true,
      breaks: false,
      sanitize: false,
      smartLists: true,
      smartypants: false,
      xhtml: false,
    });
  },
};
</script> 

<style lang="scss" scoped>
// pc端样式
@media screen and (min-width: 1200px) {
  .article-info {
    width: 100% !important;
    margin: 35px 0 20px 0;
    .top {
      position: relative;
      width: 100%;
      .info {
        position: absolute;
        left: 20%;
        top: 25%;
        width: 60%;
        z-index: 999;
        h1 {
          color: #fff;
        }
        .el-tag {
          margin-left: 15px;
        }
        .el-tag:hover {
          background-color: cyan;
          cursor: pointer;
        }
        .time {
          color: #fff;
          margin-top: 15px;
        }
        .time span:nth-child(2) {
          padding-left: 15px;
        }
      }
      .el-image {
        width: 100%;
        height: 400px;
      }
    }
    .article-body {
      width: 75%;
      margin: 0 auto;
      background-color: #fff;
      .body {
        padding: 40px 5%;
      }
    }
  }
}

// 移动端样式
@media screen and (max-width: 768px) {
  .article-info {
    width: 100%;
    margin: 35px 0 20px 0;
    overflow: hidden;
    .top {
      position: relative;
      width: 100%;
      .info {
        position: absolute;
        left: 20%;
        top: 25%;
        width: 60%;
        z-index: 999;
        h1 {
          color: #fff;
        }
        .el-tag {
          margin-left: 15px;
        }
        .el-tag:hover {
          background-color: cyan;
          cursor: pointer;
        }
        .time {
          color: #fff;
          margin-top: 15px;
        }
        .time span:nth-child(2) {
          padding-left: 15px;
        }
      }
      .el-image {
        width: 100%;
        height: 400px;
      }
    }
    .article-body {
      width: 90%;
      margin: 0 auto;
      background-color: #fff;
      .body {
        padding: 40px 5%;
      }
    }
  }
}
</style>